
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <style>
        #menu {
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px;
            background: #72a8eafa;
            border-radius: 3px;
            border: 1px solid rgba(128, 128, 128, 0.5);
            color: #ffffff;
            background: rgba(0, 0, 0, 0.4);
            box-shadow: 0 3px 14px rgba(128, 128, 128, 0.5);
            z-index: 9999;
        }
    </style>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <div id="menu">
        <input id="meeting" type="date" value="2020-10-20" />
        开始时间
        <select id="ks">
            <option value="6">6</option>
            <option selected value="8">8</option>
            <option value="10">10</option>
            <option value="12">12</option>
        </select>
        结束时间
        <select id="js">
            <option value="14">14</option>
            <option value="16">16</option>
            <option selected value="18">18</option>
            <option value="20">20</option>
        </select>
        <button onclick="setvisible('play')">播放</button>
        <button onclick="setvisible('stop')">暂停</button>
    </div>
    <script type="text/javascript">
        class sunlight {
            constructor(viewer, config) {
                this.viewer = viewer;
                this.config = config;
                this.analysis();
            }

            analysis() {
                var stopTime = null;
                var viewer = this.viewer;
                var config = this.config;

                var e = config.day;
                var t = new Date(e)
                var i = config.startTime;
                var a = config.stopTime;
                var r = new Date(new Date(t).setHours(Number(i)))
                var o = new Date(new Date(t).setHours(Number(a)));
                if (!config.play) {
                    stopTime = viewer.clock.currentTime
                    viewer.clock.shouldAnimate = false
                } else {
                    viewer.scene.globe.enableLighting = true
                    viewer.shadows = true
                    viewer.clock.startTime = Cesium.JulianDate.fromDate(r)
                    viewer.clock.stopTime = Cesium.JulianDate.fromDate(o)
                    viewer.clock.clockRange = config.clockRange
                    viewer.clock.clockStep = config.clockStep
                    viewer.clock.multiplier = config.multiplier
                    if (viewer.clock.shouldAnimate = true, stopTime) {
                        viewer.clock.currentTime = stopTime;
                    } else {
                        viewer.clock.currentTime = Cesium.JulianDate.fromDate(r)
                    }
                }
            }

        }

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {
        });
        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;
        // 深度监测
        viewer.scene.globe.depthTestAgainstTerrain = true;

        const tileset = new Cesium.Cesium3DTileset({
            url: "./data/tileset.json",
        });
        tileset.readyPromise
            .then(function (tileset) {
                viewer.scene.primitives.add(tileset);
                viewer.zoomTo(tileset)
            })
            .catch(function (error) {
                console.log(error);
            });
        function setvisible(p) {
            if (p == "play") {
                new sunlight(viewer, {
                    play: true,
                    multiplier: 500,
                    day: document.getElementById("meeting").value,
                    startTime: document.getElementById("ks").value,
                    stopTime: document.getElementById("js").value,
                    clockRange: Cesium.ClockRange.LOOP_STOP,
                    clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
                })
            } else {
                new sunlight(viewer, {
                    play: false,
                })
            }
        }
    </script>
</body>

</html>